<template>
  <div class="header">
    <div class="top">
        <span class="farmer" style="color: indianred;font-size: 30px;">农村便民服务平台</span>
        <div style="width: 350px; ">
         <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="公告" value="1"></el-option>
          <el-option label="焦点讨论" value="2"></el-option>
          <!-- <el-option label="意见反馈" value="3"></el-option>
          <el-option label="事件申请" value="4"></el-option> -->
          </el-select>
           <el-button type="primary" icon="el-icon-search" slot="append" style="background-color:deepskyblue; color: white;" @click="search">
          </el-button>
         </el-input>
        </div>
        <el-link type="success"  :underline="false"  @click="doLogin" v-show="handleLogin">登录</el-link>
        <el-link type="warning"  :underline="false"  @click="doRegister" v-show="handleLogin">注册</el-link>
        <el-link :underline="false" v-show="!handleLogin">欢迎你!&nbsp;{{ user.username }}</el-link>
        <el-link type="info"  :underline="false"  v-show="!handleLogin" @click="logout">退出</el-link>
    </div>


<div class="guide">
  <el-menu
  :default-active="activeIndex"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="darksalmon"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1" ><router-link to="/index" >首页</router-link></el-menu-item>
  <el-submenu index="2" style="width: 200px;">
    <template slot="title"><router-link  to="/">个人中心</router-link></template>
    <el-menu-item index="2-1"><router-link  to="/person">个人信息</router-link></el-menu-item>
    <el-menu-item index="2-2"><router-link  to="/myapply">我的申请</router-link></el-menu-item>
    <el-menu-item index="2-3"><router-link  to="/mydiscuss">我的发表</router-link></el-menu-item>
    <el-menu-item index="2-4"><router-link  to="/mysuggest">我的反馈</router-link></el-menu-item>
  </el-submenu>
  <el-menu-item index="3" ><router-link to="/announace">公告</router-link></el-menu-item>
  <el-menu-item index="4"><router-link to="/comment">焦点讨论</router-link></el-menu-item>
  <el-menu-item index="5"><router-link to="/research">意见反馈</router-link></el-menu-item>
  <el-menu-item index="6"><router-link to="/event">事件申请</router-link></el-menu-item>
  </el-menu>
 </div>   
    <!-- 声明路由占位标签 -->
    <router-view></router-view> 
</div>
</template>

<script>
export default {
    data() {
        return {
            input:'',
            select:'',
            activeIndex: '1',
            handleLogin: true,
            user: {
              username: '',
            }
        }
    },
    created(){
      if(this.$store.getters.getUser.username){
        this.user.username = this.$store.getters.getUser.username
        this.handleLogin = false
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
        doRegister:function(){
          this.$router.push('/register')
        },
        doLogin:function(){
          this.$router.push('/login')
        },
        logout: function(){
          this.request.get('/user/logout',{
           headers: {"Authorization": localStorage.getItem("token")}
          }).then((res) => {
            this.$store.commit('REMOVE_INFO')
            this.$message.success(" 退出成功！ ")
            this.$router.push('/login')

          })
        },
        search(){
        
          this.$router.push({name: 'Search', params: {  keyword: this.input, type: this.select, } });
          this.input='';
        }
    }
}
</script>

<style>
.el-select .el-input {
    width: 100px;
  }
  .el-link{
    float: left;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-menu-item {
    width: 200px;
  }
  /* 去掉router-link下划线 */
  a {
   text-decoration: none;
  }
  /* 头部 */
  .top{
    display: flex;
    /* 挤不下换行 */
    flex-wrap: wrap;
    /* 展开铺满，justify-content:center;则代表居中 */
    justify-content:space-evenly;
    margin-top: 20px;
    margin-block: 20px;
  }
  /* 导航栏 */
  .guide{
    text-align: center;
  }
  

</style>